<template>
    <div class="carManager">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 节点审批所有
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!-- <div class="handle-box">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="addVisible = true"
                class="tianjia"
              >添加</el-button>
            </div> -->
            <el-table :data="tableData" border class="table" ref="multipleTable">
                <el-table-column type="index" width="55" align="center" label="序号" class-name="table"></el-table-column>
                <el-table-column prop="name" label="请假名" width="120" class-name="table"></el-table-column>
                <el-table-column prop="cause" label="请假详细内容" width="100" class-name="table"></el-table-column>
                <el-table-column prop="agentName" label="发起人" width="100" class-name="table"></el-table-column>
                <el-table-column prop="createTime" label="发起日期" width="120" class-name="table"
                                 :formatter="dateFormatter"
                ></el-table-column>

                <el-table-column label="操作" width="180" align="center" class-name="table">
                    <template slot-scope="scope">

                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="ratify(scope.$index, scope.row)">批准
                        </el-button>


                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="designateDialog(scope.$index, scope.row)">指派
                        </el-button>


                        <!--<el-button-->
                        <!--type="text"-->
                        <!--icon="el-icon-edit"-->
                        <!--@click="handleEdit(scope.$index, scope.row)"-->
                        <!--&gt;编辑-->
                        <!--</el-button>-->
                        <!--<el-button-->
                        <!--type="text"-->
                        <!--icon="el-icon-delete"-->
                        <!--class="red"-->
                        <!--@click="handleDelete(scope.$index, scope.row)"-->
                        <!--&gt;删除-->
                        <!--</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="cur_page"
                        :page-size="pagesize"
                        :total="totalRecords"
                        :page-sizes="[5, 10, 20, 40]"
                        layout="total, sizes, prev, pager, next, jumper"
                ></el-pagination>
            </div>
        </div>


        <!--指派弹出框-->
        <el-dialog title="指派弹出框" :visible.sync="designateVisible" width="30%">

            <el-form ref="designateDialogForm" :model="designateDialogForm" label-width="100px">

                <el-form-item label="指派审批人" prop="traceResult">
                    <!--单选框, 绑定的值是 v-model, 传入后台的值是 label 标签, 显示在页面的值是两个尖括号中间的值-->
                    <el-radio v-model="designateDialogForm.designatePersonid" label="46">李四审批</el-radio>
                    <el-radio v-model="designateDialogForm.designatePersonid" label="47">王五审批</el-radio>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
        <el-button @click="designateVisible = false">取 消</el-button>
        <el-button type="primary" @click="designate()">确 定</el-button>
      </span>
        </el-dialog>
    </div>


</template>

<script>
    import Validator from "async-validator";
    import {config, judgeResponseCode} from '../../utils/config'

    export default {
        name: "carManager",
        data() {
            return {
                userid: [],
                wt: [],
                wq: [],
                dev: [],
                agent: [],
                value: "",
                tableData: [],
                cur_page: 1,
                pagesize: 20,
                totalRecords: 0,
                totalPages: 0,
                multipleSelection: [],
                select_cate: "",
                select_word: "",
                del_list: [],
                is_search: false,
                designateVisible: false,
                addVisible: false,
                delVisible: false,
                editForm: {
                    orderId: "",
                    orderCode: "",
                    orderType: "",
                    orderPaytype: "",
                    orderAgentid: "",
                    orderDeviceid: "",
                    orderUserid: "",
                    orderWtid: "",
                    orderWqid: ""
                },
                designateDialogForm: {
                    askForLeaveId: "",
                    designatePersonid: "",
                    taskId: ""

                },
                carFormRules: {},
                idx: -1,
                id: -1
            };
        },
        created() {
            this.getData();
        },
        computed: {
            data() {

                return this.tableData.filter(d => {
                    let is_del = false;
                    for (let i = 0; i < this.del_list.length; i++) {
                        if (d.name === this.del_list[i].name) {
                            is_del = true;
                            break;
                        }
                    }
                    if (!is_del) {
                        if (
                            d.address.indexOf(this.select_cate) > -1 &&
                            (d.name.indexOf(this.select_word) > -1 ||
                                d.address.indexOf(this.select_word) > -1)
                        ) {
                            return d;
                        }
                    }
                });
            }
        },
        methods: {
            designateDialog(index, row) {

                this.idx = index;
                this.designateDialogForm = {
                    // 请假id
                    askForLeaveId: row.askForLeaveId,
                    taskId: row.taskId
                };

                this.designateVisible = true;
            },


            designate() {

                var res = this;
                //这里用 this对象从data里面预先声明的属性,才能获取到值
                var designatePersonid = this.designateDialogForm.designatePersonid;
                var askForLeaveId = this.designateDialogForm.askForLeaveId;
                var taskId = this.designateDialogForm.taskId;

                // alert(designatePersonid + "---" + askForLeaveId  )

                this.$axios({
                    url: "/api/askForLeave/designateByAskForLeaveId",
                    method: "post",
                    data: {
                        "askForLeaveId": askForLeaveId,
                        "designatePersonid": designatePersonid,
                        "taskId": this.designateDialogForm.taskId
                    }
                })
                    .then(function (response) {


                        if (response.data.code === 200) {
                            alert("指派成功");
                            // 跳转到本页面
                            res.$router.go(0);

                        }
                    })
                    .catch(function (error) {

                    });
            },
            // 批准这个请假的节点任务
            ratify(index, row) {
                var res = this;
                var taskId = row.taskId;
                var askForLeaveId = row.askForLeaveId;

                this.$axios({
                    url: "/api/askForLeave/ratify",
                    method: "post",
                    data: {"askForLeaveId": askForLeaveId, "taskId": taskId}
                })
                    .then(function (response) {

                        if (response.data.code === 200) {
                            alert("批准成功");
                            // 跳转到本页面
                            res.$router.go(0);

                        }
                    })
                    .catch(function (error) {
                    });
            },


            dateFormatterexpirationTime(row, column) {
                let datetime = row.expirationTime;
                if (datetime) {
                    datetime = new Date(datetime);
                    let y = datetime.getFullYear() + "-";
                    let mon = datetime.getMonth() + 1 + "-";
                    let d = datetime.getDate();
                    return y + mon + d;
                }
                return "";
            },
            dateFormatter(row, column) {
                let datetime = row.createTime;
                if (datetime) {
                    datetime = new Date(datetime);
                    let y = datetime.getFullYear() + "年";
                    let mon = datetime.getMonth() + 1 + "月";
                    let d = datetime.getDate() + "日";

                    let h = datetime.getHours() + "时";
                    let f = datetime.getMinutes() + "分";
                    let m = datetime.getSeconds() + "秒";

                    return y + mon + d + h + f + m;
                }
                return "";
            },
            //每页显示数改变
            handleSizeChange(val) {
                this.pagesize = val;
                this.getData();
            },
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page = val;
                this.getData();
            },
            // 获取页面刷新数据
            getData() {

                var res = this;
                this.$axios({
                    url: "/api/askForLeave/selectLeaveInstance",
                    method: "post",
                    data: {loginId: localStorage.getItem("loginId")}
                })
                    .then(function (response) {
                        //没有登录
                        // if (response.data.code ===  999) {
                        //     alert(response.data.message);
                        //     res. $router.push('/Login');  //页面跳转,
                        // }
                        //
                        //
                        // if (response.data.code === 403) {
                        //     alert(response.data.message);
                        //
                        // }



                        // 权限校验
                        judgeResponseCode(response);


                        if (response.data.code === 200) {
                            res.tableData = response.data.data;
                        }
                    })
                    .catch(function (error) {
                    });
            },
            formatter(row, column) {
                return row.address;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            handleEdit(index, row) {
                this.idx = index;
                this.id = row.orderId;
                this.editForm = {
                    orderId: row.orderId,
                    orderCode: row.orderCode,
                    orderType: row.orderType,
                    orderPaytype: row.orderPaytype,
                    orderAgentid: row.orderAgentid,
                    orderDeviceid: row.orderDeviceid,
                    orderUserid: row.orderUserid,
                    orderWtid: row.orderWtid,
                    orderWqid: row.orderWqid
                };
                this.editVisible = true;
            },
            handleDelete(index, row) {
                this.idx = index;
                this.id = row.orderId;
                this.delVisible = true;
            },
        }
    };
</script>

<style scoped>
    .huizong {
        height: 30px;
        width: 400px;
        position: relative;
    }

    .huizong span {
        height: 30px;
        width: 400px;
        position: absolute;
        bottom: -60px;
        z-index: 999;
    }

    .tianjia {
        margin-left: 10px;
    }

    .sousuo {
        margin-right: 10px;
    }

    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .del-dialog-cnt {
        font-size: 16px;
        text-align: center;
    }

    .table {
        width: 100%;
        font-size: 14px;
    }

    .red {
        color: #ff0000;
    }

    .mr10 {
        margin-right: 10px;
    }

    .outup {
        font-size: 12px;
        color: #fff;
        background-color: #409eff;
        display: inline-block;
        border-radius: 3px;
        padding: 8px 15px;
        margin-left: 10px;
        margin-top: 3px;
    }

    .upload-demo {
        height: 30px;
        width: 100px;
        display: inline-block;
        margin-left: 10px;
    }

    .inup {
        margin-top: 10px;
    }
</style>
<style>
    .el-upload--text {
        width: 60px;
        height: 30px;
        display: inline-block;
        border: 0;
        overflow: visible;
    }

    .el-table--border {
        border: 1px solid black;
    }

    .el-table--border,
    .el-table--border th,
    .el-table td,
    .el-table th {
        border-right: 1px solid black;
        border-bottom-color: black;
        border-left-color: black;
    }

    .table {
        border-bottom-color: black !important;
        border-left-color: black !important;
    }
</style>

